import React, { useState } from 'react';
import {  Outlet, useNavigate } from 'react-router-dom'
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('首页', '1', <PieChartOutlined />),
  getItem('预算管理', '20', <DesktopOutlined />,[
    getItem('预算表提交', '/home/pages1'),
    getItem('预算表审批', '/home/pages2'),
    getItem('预算表管理', '23'),
  ]),
  getItem('收入管理', 'sub1', <UserOutlined />, [
    getItem('收入表提交', '3'),
    getItem('收入标管理', '4'),
    
  ]),
  getItem('支出管理', 'sub2', <TeamOutlined />, [
    getItem('支出表提交', '6'),
    getItem('支出表管理', '8')
]),
  getItem('系统管理', '9', <FileOutlined />,[
    getItem('账户配置', '24'),
    getItem('部门配置', '25'),
    getItem('角色组配置', '26'),
    getItem('付费主体配置', '27'),
    getItem('审批状态配置', '28'),
    getItem('科目配置', '29'),
    getItem('收入类型配置', '30'),
    getItem('操作记录', '31'),
  ]),
];

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
const navigate = useNavigate()
const toNav = (i:any)=>{
    console.log(i);
    navigate(i.key)
}
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={toNav} items={items} />
      </Sider>
      <Layout className="site-layout">
        <Header style={{ padding: 0, background: colorBgContainer }} ><h1>预算管理系统</h1></Header>
        <Content style={{ margin: '0 16px' }}>
          {/* <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb> */}
          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
           <Outlet/>
          </div>
        </Content>
        
      </Layout>
    </Layout>
  );
};

export default App;